<template>
  <div class="user-profile-wrapper">
    <!-- 文件选择 -->
      <input type="file" hidden ref="file" @change="onFileChange" />

      <!-- 个人信息 开始啦-->
      <van-cell title="头像" is-link center @click="$refs.file.click()">
        <!-- 默认是右边的插槽 -->
        <van-image class="avatar" round fit="cover" :src="require('images/userPhoto/' + this.userInfo.imgUrl)" alt="暂无头像" />
      </van-cell>

      <van-cell
        @click="isUpdateNickNameShow = true"
        title="昵称"
        :value="this.userInfo.nickName"
        is-link
      ></van-cell>

      <van-cell
          @click="isUpdateSignatureShow = true"
          title="个性签名"
          :value="this.userInfo.signature"
          is-link
      ></van-cell>

      <van-cell
        @click="isUpdateGenderShow = true"
        title="性别"
        :value="this.userInfo.gender"
        is-link
      ></van-cell>

      <!-- /个人信息 结束啦-->

      <!-- 修改昵称弹层 -->
      <van-popup
        v-model="isUpdateNickNameShow"
        style="height: 100% ; background-color: #f5f7f9;"
        position="bottom"
      >
        <update-name
          v-if="isUpdateNickNameShow"
          @close="isUpdateNickNameShow = false"
        ></update-name>
      </van-popup>
  
      <!-- 修改个性签名 -->
        <van-popup
          v-model="isUpdateSignatureShow"
          style="height: 100% ; background-color: #f5f7f9;"
          position="bottom"
        >
          <update-signature
            v-if="isUpdateSignatureShow"
            @close="isUpdateSignatureShow = false"
          ></update-signature>
        </van-popup>

      <!-- 修改性别 -->
      <van-popup v-model="isUpdateGenderShow" position="bottom">
        <update-gender
          v-if="isUpdateGenderShow"
          @close="isUpdateGenderShow = false"
        ></update-gender>
      </van-popup>

      <!--修改头像 -->
      <van-popup v-model="isUpdatePhotoShow" style="height:100%" position="bottom">
       <update-photo
          @updata-photo="this.userInfo.imgUrl = $event"
          v-if="isUpdatePhotoShow"
          @close="isUpdatePhotoShow = false" :img="img" :img1="img1"></update-photo>
      </van-popup>

  </div>
</template>

<script>
import { mapState ,mapMutations} from 'vuex';
import UpdateName from './UpdateName.vue';
import UpdateSignature from './UpdateSignature.vue';
import UpdateGender from './UpdateGender.vue';
import UpdatePhoto from './UpdatePhoto.vue';
import tools from 'utils/tools.js';

export default {
  name: 'UserProfileWrapper',
  components: {
    UpdateName,
    UpdateSignature,
    UpdateGender,
    UpdatePhoto
  },
  data() {
    return {
      isUpdateNickNameShow: false, // 修改昵称弹层
      isUpdateSignatureShow : false, //修改个性签名弹层
      isUpdateGenderShow: false, // 修改性别弹层
      isUpdateBirthdayShow: false, // 修改生日弹层
      isUpdatePhotoShow: false, // 修改头像
      img: null, // 选择的头像url
      img1: null
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    onFileChange() {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      //   console.log(file);
      // 基于文章对象获取 blob 数据 图片的src
      const data = window.URL.createObjectURL(file)
      const data1 = file.name;
      this.img = data;
      this.img1 = data1;
      console.log(data1);
      // 显示弹出层
      this.isUpdatePhotoShow = true
      // 选择同一个不会触发文件的改变事件，所以每次要手动赋值为空
      this.$refs.file.value = ''
    }
  }
};
</script>

<style lang="scss" scoped>
.user-profile-wrapper {
  
  .avatar {
    width: .5rem;
    height: .5rem;
  }
}
</style>
